<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
  <script src="./static/js/echarts.min.js"></script>
  <title>价格区间</title>
</head>

<body>
  <div id="main" style="width: 100%;height:600px;"></div>
</body>

</html>
<script>
  var data = [];
  var fullnameList = [];
  var numList = [];
  $.ajax({
    url: '/api/queryPrice/100',
    type: 'get',
    dataType: 'json',
    async: false,
    success: function (res) {
      console.log(res.data);
      data = res.data;
    }
  })

  for (var i = 0; i < data.length; i++) {
    fullnameList.push(data[i].label);
  }

  for (var i = 0; i < data.length; i++) {
    numList.push(data[i].count);
  }
  var myChart = echarts.init(document.getElementById('main'));
  var option = {
    title: {
      text: '价格分布'
    },
    tooltip: {},
    legend: {
      data: []
    },
    xAxis: {
      name: '价格区间',
      data: fullnameList,
      axisLabel: {
        interval: 0,
        rotate: 50
      }
    },
    grid: {
      left: '10%',
      bottom: '35%'
    },
    yAxis: {
      name: '价格'
    },
    series: [{
      name: '价格',
      type: 'bar',
      data: numList
    }]
  };
  myChart.setOption(option);
</script>